<template>
    <view class="Resetpwd">
        <view class="ResetpwdBox">
            <view class="ResetpwdTab">
                <view :class="item.id == 1 ? 'bevel':'rectangle'" v-for="item in state.list" :key="item.id">
                    <view class="box" v-if="item.id ==1">
                        <view class="top">

                        </view>
                        <view class="bottom">

                        </view>
                    </view>
                    <view :class="zid == item.id ? 'active':''">
                        {{item.id}}.{{item.title}}
                    </view>
                </view>
            </view>
        </view>
        <view class="ResetpwdForm" v-if="zid==1">
            <view class="LoginInput">
                <view class="Account">
                    <input class="uni-input" v-model="state.phone" placeholder="请输入手机号码" />
                    <view class="circle">
                        <u-icon name="phone" size="25" color="#FFF"></u-icon>
                    </view>
                </view>
                <view class="LoginPwd">
                    <input class="uni-input" v-model="state.Captcha" :password="value4==true? false : true"
                        placeholder="请输入短信验证码" @input='translate' />
                    <view class="circle">
                        <u-icon name="email" size="25" color="#FFF"></u-icon>
                    </view>
                    <view class="Loginicon" @click="getCaptcha">
                        {{timeFlag ? '获取验证码':state.time}}
                    </view>
                </view>
            </view>
            {{getcaptcha}}
            <view :class="flag ? 'btn' :'but'">
                <button @click="Next" :disabled='flag'>下一步</button>
            </view>
        </view>
        <view class="ResetpwdForm" v-else>
            <view class="LoginInput">
                <view class="Account">
                    <input class="uni-input" v-model="state.newpwd" placeholder="请输入设置6-20位新的登录密码" />
                    <view class="circle">
                        <u-icon name="lock-fill" size="25" color="#FFF"></u-icon>
                    </view>
                </view>
                <view class="LoginPwd">
                    <input class="uni-input" v-model="state.newoldpwd" :password="value4==true? false : true"
                        placeholder="请再次输入新的登录密码" />
                    <view class="circle">
                        <u-icon name="lock-fill" size="25" color="#FFF"></u-icon>
                    </view>
                    <!-- <view class="Loginicon">
                        获取验证码
                    </view> -->
                </view>
            </view>
            <view class="but">
                <button>提交</button>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        reactive,
        ref,
        onMounted
    } from 'vue'
    let zid = ref(1)
    let value4 = ref(false)
    let flag = ref(true)
    //设置倒计时开关
    let timeFlag = ref(true)
    //获取到的随机验证码
    let getcaptcha = ref('')
    //定时器实例
    let interval = null

    let state = reactive({
        list: [{
                id: 1,
                title: "验证码手机号码"
            },
            {
                id: 2,
                title: "设置新密码"
            }
        ],
        phone: '',
        Captcha: '',
        time: 60
    })
    //验证码
    const getCaptcha = () => {
        uni.request({
            url: 'http://localhost:3900/getCaptCha',
            method: "GET",
            success: (res) => {
                timeFlag.value = false
                getcaptcha.value = res.data
            }
        })
        interval = setInterval(() => {
            state.time--
            console.log(getcaptcha.value);
            if (state.time <= 0) {
                state.time = 60
                timeFlag.value = true
                clearInterval(interval)
            }
        }, 1000)
    }

    //输入验证码
    const translate = () => {
        console.log(1111);
        if (state.Captcha.length > 0) {
            flag.value = false
        }
    }
    //下一步
    const Next = () => {
        if (state.Captcha.length > 0) {
            uni.request({
                url: 'http://localhost:3900/Alioss',
                method: "POST",
                data: {
                    Capptcha: state.Captcha
                },
                success: (res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        zid.value = 2
                        clearInterval(interval)
                    }
                }
            })
        }
    }
    //提交
</script>

<style scoped lang="scss">
    .Resetpwd {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        // padding-left: 20rpx;
        // padding-right: 20rpx;
        display: flex;
        flex-direction: column;
        background-color: #f9f9f9;



        .ResetpwdBox {
            height: 140rpx;
        }

        .ResetpwdTab {
            display: flex;
            border: 1px solid #CCC;
            background-color: #FFF;

            .rectangle {
                width: 50%;
                height: 90rpx;
                // background-color: red;
                text-align: center;
                line-height: 90rpx;
            }

            .bevel {
                position: relative;
                width: 50%;
                height: 90rpx;
                // background-color: red;
                text-align: center;
                line-height: 90rpx;

                .box {
                    position: absolute;
                    top: 5rpx;
                    right: -22rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 20px;
                    height: 45px;
                    // margin: 50px;

                    .top,
                    .bottom {
                        width: 0;
                        height: 25px;
                        border-left: 1px solid #ccc;
                    }

                    .top {
                        transform: rotateZ(325deg);
                    }

                    .bottom {
                        transform: translate(0, -5px) rotateZ(35deg);
                    }
                }
            }

            .active {
                color: #0079fe;
            }
        }


        .ResetpwdForm {
            flex: 1;
            padding-left: 35rpx;
            padding-right: 35rpx;

            .uni-input {
                height: 100rpx;
                border: 1px solid #CCC;
                padding-left: 150rpx;
                font-size: 25rpx;
            }

            .Account,
            .LoginPwd {
                position: relative;

                .circle {
                    display: flex;
                    justify-content: space-around;
                    position: absolute;
                    top: 24%;
                    left: 55rpx;
                    width: 55rpx;
                    /* 设置元素的宽度 */
                    height: 55rpx;
                    /* 设置元素的高度 */
                    border-radius: 50%;
                    /* 将边角设置为半径相等的圆形 */
                    background-color: #cccccc;
                    /* 设置背景颜色 */
                }
            }

            .LoginPwd {

                .Loginicon {
                    position: absolute;
                    top: 32%;
                    right: 7%;
                    z-index: 11;
                    font-size: 25rpx;
                    color: #0079fe;
                }

                .uni-input {
                    border-top: 0;
                }
            }

            .but {
                height: 220rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                button {
                    width: 100%;
                    height: 95rpx;
                    background-color: #0079fe;
                    color: #FFF;
                    font-size: 35rpx;
                }
            }

            .btn {
                height: 220rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                button {
                    width: 100%;
                    height: 95rpx;
                    background-color: #CCC;
                    color: #FFF;
                    font-size: 35rpx;
                }
            }
        }
    }
</style>